<template>
  <div>
    <div v-show="!isShowAddCityMannage">
      <jxf-titletip :title="title" @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="地区:" prop="cityId">
            <el-select v-model="searchInfo.cityId" clearable filterable placeholder="全部">
              <el-option v-for="item in cityList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:" prop="status">
            <el-select v-model="searchInfo.status" clearable placeholder="全部">
              <el-option label="生效中" value="1"></el-option>
              <el-option label="已失效" value="0"></el-option>
              <el-option label="待生效" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="showCityMannge">添加城市账期</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="status" slot-scope="merchantList">
            <div>{{merchantList.row.status === 0 ? "已失效" : merchantList.row.status === 1 ? "生效中" : "待生效"}}</div>
          </template>
          <template slot="operation" slot-scope="merchantList">
            <el-button type="text" v-if="merchantList.row.status !== 2" @click="watchDetail(merchantList.row)">查看</el-button>
            <el-button type="text" v-if="merchantList.row.status === 1" @click="freezeAccount(merchantList.row)">停用</el-button>
            <el-button type="text" v-if="merchantList.row.status === 2" @click="editPeriod(merchantList.row)">编辑</el-button>
            <el-button type="text" v-if="merchantList.row.status === 2" @click="unFreezeAccount(merchantList.row)">启用</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <BillPassReview :isShowDetail.sync="isShowFreezeModel" :title="freezeTitle" :dataInfo="passReviewInfo" @fresh="fresh"></BillPassReview>
    <BillNotPassReview :isShowDetail.sync="isShowUnFreezeModel" :title="unFreezeTitle" :dataInfo="passReviewInfo" @fresh="fresh"></BillNotPassReview>
    <CityManagement v-if="isShowAddCityMannage" @goBack="goBack" :dataInfo="dataInfo" @fresh="fresh" :title="subTitle" :url="changeStatusURL"></CityManagement>
  </div>
</template>

<script>
  import BillPassReview from './components/BillPassReview'
  import BillNotPassReview from './components/BillNotPassReview'
  import CityManagement from './components/CityManagement'
  export default {
    name: "SupplierTPManagement",
    components: { BillPassReview, BillNotPassReview, CityManagement },
    data() {
      return {
        title: "供应商转出方案管理",
        searchInfo: {
          cityId: null,
          status: null
        },
        dataInfo: {},
        cityList: [],
        passReviewInfo: {},
        changeStatusURL: '',
        isShowFreezeModel: false,
        isShowUnFreezeModel: false,
        isShowAddCityMannage: false,
        freezeTitle: "停用操作",
        unFreezeTitle: "启用操作",
        subTitle: "",
        dataTable: {
          border:true,
          loading:false,
          hasSelect:false,
          hasOperation:false,
          tr: [
            {
              id: '1',
              label: '地区',
              prop: 'cityName'
            },
            {
              id: '2',
              label: '方案名称',
              prop: 'accountName'
            },
            {
              id: '3',
              label: 'N+0（%）',
              prop: 'firstRate'
            },
            {
              id: '4',
              label: 'N+1（%）',
              prop: 'secondRate'
            },
            {
              id: '5',
              label: 'N+2（%）',
              prop: 'thirdRate'
            },
            {
              id: '6',
              label: '状态',
              show: 'template',
              prop: 'status'
            },
            {
              id: '7',
              label: '操作',
              show: 'template',
              width: "120",
              prop: 'operation'
            }
          ],
          operation: [],
          data: []
        },
        pageTotal:40,
        pageSize:10,
        currentPage:1
      }
    },
    methods: {
      fresh() {
        this.getData()
      },
      refreshFuc() {
        this.resetForm('searchInfo')
        this.currentPage = 1;
        this.pageSize = 10
        this.getData()
      },
      dropCity() {
        ajax.get(apis.finance.selectCity).then(res => {
          if(res.code === "10000000") {
            this.cityList = res.data;
          } else {
            this.$message.error(res.message)
          }
        })
      },
      editPeriod(obj) {
        ajax.get(apis.finance.getSupplierBalanceDetail, { id: obj.id }).then(res => {
          if(res.code == "10000000") {
            this.dataInfo = res.data;
            this.dataInfo && this.dataInfo.supplierSchemeStarVoList.map((item, index) => {
              item.rate = item.rate ? Math.round(item.rate * 100000) / 1000 : 0
              item.starName = "*N+" + item.starName
            })
            this.dataInfo.id = res.data.id;
            this.subTitle = "编辑城市账期"
            this.changeStatusURL = apis.finance.updateSupplierPeriod;
            this.isShowAddCityMannage = true;
          } else {
            this.$message.error(res.message)
          }
        })
      },
      watchDetail(obj) {
        ajax.get(apis.finance.getSupplierBalanceDetail, { id: obj.id }).then(res => {
          if(res.code == "10000000") {
            this.dataInfo = res.data;
            this.dataInfo && this.dataInfo.supplierSchemeStarVoList.map((item, index) => {
              item.rate = item.rate ? Math.round(item.rate * 100000) / 1000 : 0
              item.starName = "*N+" + item.starName
            })
            this.subTitle = "查看城市账期"
            this.dataInfo.pageType = '1'
            this.isShowAddCityMannage = true;
          } else {
            this.$message.error(res.message)
          }
        })
      },
      enterNextInput(inputName) {
        this.$refs["input-" + inputName].focus();
      },
      getData() {
        this.dataTable.loading = true;
        let data = {
          ...this.searchInfo,
          status: this.searchInfo.status ? this.searchInfo.status : null,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        };
        ajax.post(apis.finance.supplierScheme, data).then(res => {
          if(res.code === "10000000") {
            this.dataTable.data = res.data.dataList ? res.data.dataList : [];
            this.dataTable.data.forEach(item => {
              item.firstRate = item['0'] !== undefined ? Math.round(item['0'] * 10000)/100 : ""
              item.secondRate = item['1'] !== undefined ? Math.round(item['1'] * 10000)/100 : ""
              item.thirdRate = item['2'] !== undefined ? Math.round(item['2'] * 10000)/100 : ""
            })
            this.pageTotal = res.data.total
          } else {
            this.$message.error(res.message)
          }
          this.dataTable.loading = false;
        })
      },
      onSearch() {
        this.currentPage = 1;
        this.getData();
      },
      // 显示添加返利方案页面
      showCityMannge() {
        this.dataInfo = {}
        this.subTitle = "新增城市账期"
        this.changeStatusURL = apis.finance.addSupplierPeriod;
        this.isShowAddCityMannage = true;
      },
      // 第二页面 --> 第一页面
      goBack() {
        this.isShowAddCityMannage = false;
      },
      freezeAccount(obj) {
        this.passReviewInfo = obj
        // 查看总经理的电话
        ajax.get(apis.finance.getGmTel).then(res => {
          if(res.code == "10000000") {
            this.passReviewInfo.gmTel = res.data;
            this.passReviewInfo.sendCode = apis.finance.sendSupplierCode
            this.passReviewInfo.url = apis.finance.notPassSupplierBill
            this.isShowFreezeModel = true;
          }
        })
      },
      unFreezeAccount(obj) {
        this.passReviewInfo = obj
        // 查看总经理的电话
        ajax.get(apis.finance.getGmTel).then(res => {
          if(res.code == "10000000") {
            this.passReviewInfo.gmTel = res.data;
            this.passReviewInfo.sendCode = apis.finance.sendSupplierCode
            this.passReviewInfo.url = apis.finance.passSupplierBill
            this.isShowUnFreezeModel = true;
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getData()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getData()
      },
    },
    created() {
      this.onSearch()
      this.dropCity()
    }
  }
</script>

<style lang="scss" scoped>

</style>
